<template>
  <div id="orderDetails">
    <div class="orderBusiness bgColor-fff padding-tb20">
      <div class="orderBusiness-details clear">
        <img :src="business.img" class="fl icon_user">
        <div class="fl">
          <p class="title">{{business.name}}</p>
          <p v-if="!ifShow" class="money"><label class="current">￥<span>{{business.money}}</span></label><!--<span class="price">原价300元</span>--></p>
          <p v-if="ifShow" class="money"><span>{{business.num}}份</span><span>总价￥{{business.money}}</span></p>
        </div>
        <img src="../../../../static/images/icon/icon-right.png" class="icon_right fr">
      </div>
    </div>
    <!--订单可使用和不可使用开始-->
    <div class="bgColor-fff margin-t20 order_status" v-if="ifShow" :class="[{'bgColor-e6':hasUsed==true},{'bgColor-e6':hasFail==true}]">
      <span :class="[{'text-decoration':hasUsed==true},{'text-decoration':hasFail==true}]">{{business.volumeNumber}}</span>
      <p>券号</p>
      <div class="noUse" v-text="typeName" v-if="ifShowMask"></div>
    </div>
    <!--结束-->
    <div class="bgColor-fff contact margin-t20 sort padding-tb20">
      <p>有效期：<span>2018-05-09</span></p>
      <p>联系人：<span>小白</span></p>
      <p>手机号：<span>13558767655</span></p>
    </div>
    <div class="bgColor-fff contact margin-t20 sort padding-tb20" v-if="pendPayment">
      <p>商品单价：<span>¥ {{business.money}}.00</span></p>
      <p>商品数量：<span>X {{business.num}}</span></p>
      <p>商品总价：<span>¥ {{business.money}}.00</span></p>
      <!--<p>总  折  扣：<span class="orange">- ¥ 64.00</span></p>-->
    </div>
    <div class="bgColor-fff all-price">
      <div class="all-price-border">
        <div class="border-top">订单总价：<span>¥ {{business.money}}.00</span></div>
        <div v-if="ifShow" class="border-top">实际付款：<span>¥ {{business.money}}.00</span></div>
      </div>
    </div>
    <div class="orderBusiness bgColor-fff padding-tb20 margin-t20">
      <div class="orderBusiness-details clear">
        <img :src="business.img" class="fl icon_user">
        <div class="fl content">
          <p class="title">{{business.name}}</p>
          <p class="money"><span>{{business.city}}</span><span>{{business.area}}</span></p>
        </div>
        <img src="../../../../static/images/icon/icon-right.png" class="icon_right fr">
      </div>
    </div>
    <div class="bgColor-fff all-price">
      <div>
        <label class="clear" @click="map()">
          <img src="../../../../static/images/icon/icon-map.png" class="fl">
          <p class="fl">{{business.address}}</p>
        </label>
        <img @click="phoneCall(business.iphone)" class="fr" src="../../../../static/images/icon/icon-iphone.png">
      </div>
    </div>
    <div class="bgColor-fff contact margin-t20 sort padding-tb20">
      <p>订单编号：<span>18642222116</span></p>
      <p>下单时间：<span>2018-05-10 15:22:41</span></p>
      <p v-if="hasFail">失效时间：<span>2018-05-10 15:22:41</span></p>
      <p v-if="hasUsed">使用时间：<span>2018-05-10 15:22:41</span></p>
      <p v-if="hasCancel">取消时间：<span>2018-05-10 15:22:41</span></p>
      <p v-if="hasCancel">取消原因：<span>用户自动取消</span></p>
    </div>
    <div class="copyRight">
      <div class="copyRight-name">找玩网</div>
      <div class="copyRight-name">五朵云.休闲农旅全场景运营服务商 版权所有</div>
    </div>
    <!--订单按钮-->
    <div v-if="pendPayment" style="height: 200rpx"></div>
    <div class="order-pay button" v-if="pendPayment">
      <div class="default">取消订单</div>
      <div class="confirm">支付</div>
    </div>
  </div>
</template>

<script>
    // import card from '@/components/card'

    export default {
        name: "orderDetails",
        data() {
            return {
              typeName: "",
              pendPayment:  false,//代付款
              canUsed: false,// 可使用
              hasUsed: false,// 已使用
              hasFail: false,// 已失效
              hasCancel: false,// 已取消
              ifShow:false, //是否显示隐藏使用码
              ifShowMask:false, //可使用遮罩层
              business: {}
            }
        },
        components: {

        },
        methods: {
            map: function () {
              console.log(this.business.latitude);
              console.log(this.business.longitude);
                wx.openLocation({
                    latitude: this.business.latitude,
                    longitude: this.business.longitude,
                    scale: 15,
                    name: this.business.name,
                    address: this.business.address,
                })
            },
            phoneCall: function (iphone) {
              wx.makePhoneCall({
                phoneNumber: iphone,
                success: function () {
                  console.log("拨打电话成功！")
                },
                fail: function () {
                  console.log("拨打电话失败！")
                }
              })
            }
        },
        /*页面取值*/
        onLoad: function (option) {
            var type = option.type;
            if (type ==1) {
              //可使用
                this.pendPayment = false, this.ifShow = true, this.hasFail = false, this.hasUsed = false, this.hasCancel = false;
            }else if(type ==2)  {
              //代付款
                this.pendPayment = true, this.canUsed = true, this.ifShow = false, this.hasFail = false, this.hasUsed = false, this.hasCancel = false, this.ifShowMask = false;
            }else if(type ==3)  {
              //已取消
              this.pendPayment = false, this.hasCancel = true, this.ifShow = false, this.hasFail = false, this.hasUsed = false;
            }else if(type ==4)  {
              //已使用
              this.pendPayment = false, this.hasUsed = true, this.ifShow = true, this.hasFail = false, this.hasCancel = false, this.ifShowMask = true;
              this.typeName = "已使用"
            }else if(type ==5)  {
              //已失效
              this.pendPayment = false, this.hasFail = true, this.ifShow = true, this.hasFail = true, this.hasUsed = false, this.hasCancel = false, this.ifShowMask = true;
              this.typeName = "已失效"
            }
            for (var k = 0, length = this.$store.state.order.length; k < length; k++) {
                if(this.$store.state.order[k].type == type) {
                  this.business = this.$store.state.order[k];
                  // console.log(JSON.stringify(this.business));
                  return;
                }
            }
        },
        computed: {

        },
        created() {

        }
    }
</script>
<style scoped lang=scss>
  @import "../../../../static/css/index.css";
  $color-f5: #f5f5f5;
  $color-fff: #ffffff;
  $color-green: #57d9bf;
  $color-999:#999999;
  $color-666:#666666;
  $color-crimson: #da3b6f;
  $color-red: #ff2865;
  $color-grey: #d0d0d0;
  $color-3e: #3e3e3e;
  $color-orange: #ffa128;
  .orderBusiness {
    /*padding: 0 20rpx;*/
    .orderBusiness-details {
      height: 180rpx;
      > .icon_user {
        width: 100rpx;
        height: 100rpx;
        margin-left: 20rpx;
        margin-top: 40rpx;
      }
      > div {
        margin-top: 40rpx;
        width: 450rpx;
        margin-left: 40rpx;
        display: inline-block;
        > .title {
          width:450rpx;
          overflow: hidden;/*超出部分隐藏*/
          white-space: nowrap;/*不换行*/
          text-overflow:ellipsis;/*超出部分文字以...显示*/
          color: $color-3e;
          font-size: 30rpx;
          margin-top: 8rpx;
        }
        > .money {
          margin-top: 5rpx;
          color: $color-999;
          font-size: 24rpx;
          span {
            margin-right: 20rpx;
          }
          .price {
            text-decoration:line-through
          }
          .current {
            color: $color-red;
            font-size: 24rpx;
            span {
              font-size: 36rpx;
            }
          }

        }
      }
      > .icon_right {
        width: 24rpx;
        height: 42rpx;
        margin-top: 69rpx;
      }
    }
  }
  .sort {
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    p {
      font-size: 28rpx;
      color: $color-666;
      line-height: 28px;
      padding-left: 20rpx;
      .orange {
        color: $color-orange;
      }
    }
  }
  .all-price {
    padding: 0 40rpx;
    font-size: 28rpx;
    color: $color-666;
    > div {
      height: 110rpx;
      line-height: 110rpx;
      border-top: 1rpx solid #e7e6e6;
      label {
        display: inline-block;
      }
      &.border-top {
        span {
          color: $color-green;
        }
      }
      img {
        width: 30rpx;
        height: 32rpx;
        margin-top: 39rpx;
      }
      p {
        height: 50rpx;
        line-height: 50rpx;
        width:550rpx;
        padding-left: 20rpx;
        padding-right: 20rpx;
        margin-top: 30rpx;
        border-right: 1rpx solid $color-green;
        overflow: hidden;/*超出部分隐藏*/
        white-space: nowrap;/*不换行*/
        text-overflow:ellipsis;/*超出部分文字以...显示*/
      }
    }
    .all-price-border {
      border-top: 1rpx solid #e7e6e6;
      padding: 20rpx 0;
      height: inherit;
      line-height: initial;
      .border-top {
        height: 60rpx;
        line-height: 60rpx;
        &:last-child {
          span {
            color: $color-green;
          }
        }
      }
    }
  }
  .order_status {
    text-align: center;
    padding: 30rpx 0;
    position: relative;
    height: 90rpx;
    span {
      font-size: 48rpx;
      color: #3e3e3e;
      &.text-decoration{
        text-decoration:line-through
      }
    }
    p {
      font-size: 28rpx;
      color: $color-green;
    }

  }
  .mb200 {
    /*margin-bottom: 400rpx;*/
  }
  .bgColor-e6 {
    background: #e6e6e6;
  }
  .noUse {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 0;
    background-color: rgba(204,204,204,0.9);
    height: 150rpx;
    line-height: 150rpx;
    font-size: 36px;
    color: #3e3e3e;
  }
</style>
